<template>
  <div id="app">
    <p style="padding-left:5px; margin-right:150px">首页</p>
    <el-row :gutter="20">
      <el-col :span="10"><v-chart class="my-chart" :options="bar"/></el-col>
      <el-col :span="10"><v-chart class="my-chart" :options="total"/></el-col>
    </el-row>
  </div>
</template>
<script>
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/line";
import "echarts/lib/chart/bar";
export default {
  name: "App",
  components: {
    "v-chart": ECharts,
  },

  data: function() {
    return {
      total: {
        xAxis: {
          type: "category",
          data: ["正常", "隔离", "确诊", "已治愈"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [12, 8, 7, 13],
            type: "bar",
          },
        ],
      },
      bar: {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [2, 3, 2, 1, 5, 4, 2],
            type: "line",
          },
        ],
      },
    };
  },
};
</script>
<style>
.my-chart {
  width: 500px;
  height: 500px;
}
</style>
